<template>
<div class="main_container">
    <KeepAlive>
        <component :is="currentCmp"/>
    </KeepAlive>
    <BottomNav @clickTab="onClickTab"></BottomNav>
</div>

</template>

<script setup>
    import BottomNav from '@/components/BottomNav.vue';
    import { shallowRef } from 'vue';
    import Home from '../components/Home.vue';
    import Archive from '../components/Archive.vue';
    import Personal from '../components/Personal.vue';
    import {useAnswerListStore} from '@/stores'

    defineEmits(["vnode-unmounted"])

    const answerListStore = useAnswerListStore()
    let currentCmp = shallowRef(Home)
    let currentTabIndex = 0

    function onClickTab(tabIndex, onTabChanged) {
        if (currentTabIndex === tabIndex) {
            return
        }
        if (tabIndex == 1) {
            if (answerListStore.answerList.length === 0) {
                alert("请先完成问卷调，再查看健康档案")
                return
            }
        }
        switch (tabIndex) {
            // TODO 点击底部导航按钮，实现页面切换
            
        }
        onTabChanged(tabIndex)
        currentTabIndex = tabIndex
    }

</script>


<style scoped>
    .main_container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20%;
        margin-right: 20%;
        height: 90%;
        border-color: forestgreen;
        border-width: 2px;
        border-radius: 3px;
        padding: 10px 20px;
        border-style: solid;
    }

</style>